<script setup>
//:class绑定  字符串（一个或多个）  对象  数组
import { ref } from "vue";
const isPrimaryBackground = ref(true);
function toggleBackground() {
  isPrimaryBackground.value = !isPrimaryBackground.value;
}
</script>
<template>
  <div>
    <button @click="toggleBackground">切换背景</button>
    <div
      :class="{
        'bg-primary': isPrimaryBackground,
        'bg-secondary': !isPrimaryBackground,
      }"
      class="content"
    >
      背景区域
    </div>
  </div>
</template>
<style scoped>
.bg-primary {
  background-color: lightblue;
  padding: 20px;
}
.bg-secondary {
  background-color: lightcoral;
  padding: 20px;
}
.content {
  width: 200px;
  margin: 20px auto;
  line-height: 100px;
  text-align: center;
  height: 100px; /* 增加高度使背景更明显 */
}
</style>
